File: //home/sioberen/public_html/wp-content/themes/colibri-wp/inc/src/Components/FrontHeader/Image.php
<?php
namespace ColibriWP\Theme\Components\FrontHeader;
use ColibriWP\Theme\Components\CSSOutput;
use ColibriWP\Theme\Core\ComponentBase;
use ColibriWP\Theme\Defaults;
use ColibriWP\Theme\Translations;
use ColibriWP\Theme\View;
class Image extends ComponentBase {
protected static $settings_prefix = "header_front_page.hero.image.";
protected static $selector = "#hero";
public static function selectiveRefreshSelector() {
return Defaults::get( static::$settings_prefix . 'selective_selector', false );
}
/**
* @return array();
*/
protected static function getOptions() {
$prefix = static::$settings_prefix;
$selector = static::$selector;
$prefix_shadow = "{$prefix}style.descendants.image.boxShadow.";
$prefix_frame = "{$prefix}style.descendants.frameImage.";
return array(
"sections" => array(
"{$prefix}section" => array(
'title' => Translations::get( 'image' ),
'panel' => 'header_panel',
'type' => 'colibri_section',
'hidden' => true
)
),
"settings" => array(
"{$prefix}localProps.url" => array(
'default' => Defaults::get( "{$prefix}localProps.url" ),
'control' => array(
'label' => Translations::get( 'image' ),
'type' => 'image',
'section' => "{$prefix}section",
'colibri_tab' => "content",
),
),
"{$prefix_shadow}layers.0" => array(
'default' => Defaults::get( "{$prefix_shadow}layers.0" ),
'control' => array(
'label' => Translations::get( 'box_shadow' ),
'type' => 'composed',
'input_type' => 'switch',
'section' => "{$prefix}section",
'colibri_tab' => 'content',
'fields' => array(
'x' => array(
'type' => 'slider',
'label' => Translations::get( 'horizontal' ),
'default' => Defaults::get( "{$prefix_shadow}layers.0.x" ),
'props' => array(
'min' => - 100,
'max' => 100,
)
),
'y' => array(
'type' => 'slider',
'label' => Translations::get( 'vertical' ),
'default' => Defaults::get( "{$prefix_shadow}layers.0.y" ),
'props' => array(
'min' => - 100,
'max' => 100,
)
),
'spread' => array(
'type' => 'slider',
'label' => Translations::get( 'spread' ),
'default' => Defaults::get( "{$prefix_shadow}layers.0.spread" ),
'props' => array(
'options' => array(
'min' => 0,
'max' => 100,
),
)
),
'blur' => array(
'type' => 'slider',
'label' => Translations::get( 'blur' ),
'default' => Defaults::get( "{$prefix_shadow}layers.0.blur" ),
'props' => array(
'options' => array(
'min' => 0,
'max' => 100,
),
)
),
'color' => array(
'type' => 'color-picker',
'label' => Translations::get( 'color' ),
'default' => Defaults::get( "{$prefix_shadow}layers.0.color" ),
'props' => array(
'inline' => true,
),
),
)
),
'css_output' => array(
array(
'selector' => "{$selector} img",
'media' => CSSOutput::NO_MEDIA,
'property' => 'box-shadow',
'value_pattern' => '#x#px #y#px #blur#px #spread#px #color#',
),
),
'active_rules' => array(
array(
"setting" => "{$prefix_shadow}enabled",
"operator" => "=",
"value" => true,
),
),
),
"{$prefix_shadow}enabled" => array(
'default' => Defaults::get( "{$prefix_shadow}enabled" ),
'control' => array(
'label' => Translations::get( 'box_shadow' ),
'input_type' => 'switch',
'type' => 'group',
'section' => "{$prefix}section",
'show_toggle' => true,
'controls' => array(
"{$prefix_shadow}layers.0",
),
'colibri_tab' => 'content',
),
'css_output' => array(
array(
'selector' => "{$selector} img",
'media' => CSSOutput::NO_MEDIA,
'property' => 'box-shadow',
'false_value' => 'none',
),
),
),
//frame options
"{$prefix}props.frame.type" => array(
'default' => Defaults::get( "{$prefix}props.frame.type" ),
'control' => array(
'label' => Translations::get( 'type' ),
'type' => 'select',
'section' => "{$prefix}section",
'colibri_tab' => "content",
'choices' => array(
'border' => Translations::escHtml( "border" ),
'background' => Translations::escHtml( "background" ),
),
),
'css_output' => array(
array(
'selector' => "{$selector} div.h-image__frame",
'media' => CSSOutput::NO_MEDIA,
'property' => 'border-style',
'value' => array(
'border' => 'solid',
'background' => 'none',
),
),
array(
'selector' => "{$selector} div.h-image__frame",
'media' => CSSOutput::NO_MEDIA,
'property' => 'background-color',
'value' => array(
'border' => 'transparent',
'background' => '',
),
),
),
/*
'js_output' => array(
array(
'selector' => "{$selector} .h-image__frame",
'action' => 'set-css',
'property' => 'border-style',
'value' => array(
'border' => 'solid',
'background' => 'none',
),
),
array(
'selector' => "{$selector} .h-image__frame",
'action' => 'set-css',
'property' => 'background-color',
'value' => array(
'border' => 'transparent',
'background' => '',
),
),
),*/
),
"{$prefix_frame}backgroundColor" => array(
'default' => Defaults::get( "{$prefix_frame}backgroundColor" ),
'control' => array(
'label' => Translations::escHtml( "color" ),
'type' => 'color',
'section' => "{$prefix}section",
'colibri_tab' => 'content',
),
'css_output' => array(
array(
'selector' => "{$selector} .h-image__frame",
'media' => CSSOutput::NO_MEDIA,
'property' => 'background-color',
),
array(
'selector' => "{$selector} .h-image__frame",
'media' => CSSOutput::NO_MEDIA,
'property' => 'border-color',
),
),
),
"{$prefix_frame}width" => array(
'default' => Defaults::get( "{$prefix_frame}width" ),
'control' => array(
'label' => Translations::get( 'width' ),
'type' => 'slider',
'section' => "{$prefix}section",
'colibri_tab' => 'content',
'min' => 0,
'max' => 300,
),
'css_output' => array(
array(
'selector' => "{$selector} .h-image__frame",
'media' => CSSOutput::NO_MEDIA,
'property' => 'width',
"value_pattern" => "%s%%",
),
),
),
"{$prefix_frame}height" => array(
'default' => Defaults::get( "{$prefix_frame}height" ),
'control' => array(
'label' => Translations::get( 'height' ),
'type' => 'slider',
'section' => "{$prefix}section",
'colibri_tab' => 'content',
'min' => 0,
'max' => 300,
),
'css_output' => array(
array(
'selector' => "{$selector} .h-image__frame",
'media' => CSSOutput::NO_MEDIA,
'property' => 'height',
"value_pattern" => "%s%%",
),
),
),
"{$prefix_frame}transform.translate" => array(
'default' => Defaults::get( "{$prefix_frame}transform.translate" ),
'control' => array(
'label' => Translations::get( 'offset' ),
'type' => 'composed',
'input_type' => 'textarea',
'section' => "{$prefix}section",
'colibri_tab' => 'content',
'fields' => array(
"x_value" => array(
'type' => 'slider',
'label' => Translations::get( 'offset_left' ),
'default' => Defaults::get( "{$prefix_frame}transform.translate.x_value" ),
'props' => array(
'min' => - 50,
'max' => 50,
)
),
"y_value" => array(
'type' => 'slider',
'label' => Translations::get( 'offset_top' ),
'default' => Defaults::get( "{$prefix_frame}transform.translate.y_value" ),
'props' => array(
'min' => - 50,
'max' => 50,
)
),
),
),
'css_output' => array(
array(
'selector' => "{$selector} .h-image__frame",
'media' => CSSOutput::NO_MEDIA,
'property' => 'transform',
'value_pattern' => 'translateX(#x_value#%) translateY(#y_value#%)',
),
),
),
"{$prefix_frame}thickness" => array(
'default' => Defaults::get( "{$prefix_frame}thickness" ),
'control' => array(
'label' => Translations::get( 'frame_thickness' ),
'type' => 'slider',
'section' => "{$prefix}section",
'colibri_tab' => 'content',
'min' => 0,
'max' => 100,
),
'active_rules' => array(
array(
"setting" => "{$prefix}props.frame.type",
"operator" => "=",
"value" => "border",
),
),
'css_output' => array(
array(
'selector' => "{$selector} .h-image__frame",
'media' => CSSOutput::NO_MEDIA,
'property' => 'border-width',
"value_pattern" => "%spx",
),
),
),
"{$prefix}props.showFrameOverImage" => array(
'default' => Defaults::get( "{$prefix}props.showFrameOverImage" ),
'control' => array(
'label' => Translations::get( 'frame_over_image' ),
'type' => 'switch',
'show_toggle' => true,
'section' => "{$prefix}section",
'colibri_tab' => 'content',
),
'css_output' => array(
array(
'selector' => "{$selector} .h-image__frame",
'media' => CSSOutput::NO_MEDIA,
'property' => 'z-index',
'true_value' => '1',
'false_value' => '-1',
),
),
),
"{$prefix}props.showFrameShadow" => array(
'default' => Defaults::get( "{$prefix}props.showFrameShadow" ),
'control' => array(
'label' => Translations::get( 'frame_shadow' ),
'type' => 'switch',
'show_toggle' => true,
'section' => "{$prefix}section",
'colibri_tab' => 'content',
),
'js_output' => array(
array(
'selector' => "{$selector} .h-image__frame",
'action' => "toggle-class",
'value' => 'h-image__frame_shadow',
),
),
),
"{$prefix}props.enabledFrameOption" => array(
'default' => Defaults::get( "{$prefix}props.enabledFrameOption" ),
'control' => array(
'label' => Translations::get( 'frame_options' ),
'input_type' => 'switch',
'type' => 'group',
'section' => "{$prefix}section",
'show_toggle' => true,
'controls' => array(
//"{$prefix_frame}composed",
"{$prefix}props.frame.type",
"{$prefix_frame}backgroundColor",
"{$prefix_frame}width",
"{$prefix_frame}height",
"{$prefix_frame}transform.translate",
"{$prefix_frame}thickness",
"{$prefix}props.showFrameOverImage",
"{$prefix}props.showFrameShadow",
),
'colibri_tab' => 'content',
),
'css_output' => array(
array(
'selector' => "{$selector} .h-image__frame",
'media' => CSSOutput::NO_MEDIA,
'property' => 'display',
'true_value' => 'block',
'false_value' => 'none',
),
),
),
),
);
}
public function renderContent() {
//if ( $this->mod( static::$settings_prefix . 'show' ) ) {
View::partial( 'front-header', 'image', array(
"component" => $this,
) );
//}
}
public function printImage( $classes, $placeholder ) {
$prefix = static::$settings_prefix;
$image = $this->mod( "{$prefix}localProps.url" );
if ( ! $image ) {
$image = $placeholder;
}
?>
<img src="<?php echo esc_attr( $image ); ?>" alt="" class="<?php echo esc_attr( $classes ); ?>"/>
<?php
}
public function printFrameClasses() {
$prefix = static::$settings_prefix;
$classes = array();
if ( $this->mod( "{$prefix}props.showFrameShadow", false ) ) {
$classes[] = "h-image__frame_shadow";
}
echo esc_attr( implode( " ", $classes ) );
}
public function getPenPosition() {
return static::PEN_ON_RIGHT;
}
}